<template>
  <!-- <div class="departments">
    <el-card class="box-card">
      <el-tabs v-model="activeName" class="tabs">
        <el-tab-pane label="组织结构" name="first"></el-tab-pane>
      </el-tabs>
      <div class="box">
        <div slot="header" class="clearfix">
          <span>昨夜星辰</span>
          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div class="text item">
          <el-tree :data="data" :props="defaultProps" default-expand-all></el-tree>
        </div>
      </div>
    </el-card>
  </div>-->
  <div class="departments">
    <el-card class="mycard">
      <el-tabs v-model="activeName">
        <el-tab-pane label="组织架构" name="first"></el-tab-pane>
      </el-tabs>
      <!-- 内容结构 -->
      <div class="box">
        <!-- 头部 -->
        <treeTools class="myborder" :item="headData" @updateData="getDeptData"></treeTools>
        <!-- 内容 -->
        <el-tree class="mytree" :data="data" default-expand-all>
          <treeTools
            slot-scope="{ data }"
            @addShow="addShow"
            @editShow="editShow"
            @updateData="getDeptData"
            :item="data"
          ></treeTools>
        </el-tree>
      </div>
    </el-card>
    <add-dept
      :dialogFormVisible.sync="dialogFormVisible"
      @updateData="getDeptData"
      ref="myadddept"
      :id="currentId"
    ></add-dept>
  </div>
</template>
<script>
import { getDeptApi } from "@/api/departments";

export default {
  data() {
    return {
      // 头部结构的数据源
      headData: {},
      activeName: "first",
      data: [],
      dialogFormVisible: false,
      currentId: ""
    };
  },
  methods: {
    addShow(id) {
      // 显示弹出框
      this.dialogFormVisible = true;
      // 保存当前点击的部门id
      this.currentId = id;
    },
    editShow(id) {
      this.$refs.myadddept.getDeptDetail(id);
      // 显示弹出框
      this.dialogFormVisible = true;
    },
    fn(data) {
      console.log(data);
    },
    turnData(arr, pid) {
      let res = [];
      arr.forEach(item => {
        if (item.pid === pid) {
          const son = this.turnData(arr, item.id);
          item.children = son;
          res.push(item);
        }
      });
      return res;
    },
    async getDeptData() {
      //请求部门数据
      const res = await getDeptApi();
      // 保存部门数据
      this.data = this.turnData(res.data.depts, "");
      // 保存头部数据：就是列表中的第一条数据
      this.headData = res.data.depts[0];
      // 给头部数据手动添加属性：manager
      this.headData.manager = "负责人";
      this.headData.isHead = true;
    }
  },
  created() {
    this.getDeptData();
  },
  components: {
    treeTools: () => import("./components/tree-tools.vue"),
    addDept: () => import("./components/add-dept.vue")
  }
};
</script>

<style lang="scss">
// .departments {
//   margin: 30px;
// }
// .text {
//   font-size: 14px;
// }

// .item {
//   margin-bottom: 18px;
// }

// .clearfix:before,
// .clearfix:after {
//   display: table;
//   content: "";
// }
// .clearfix:after {
//   clear: both;
// }

// .box {
//   // width: 480px;
//   padding: 30px 60px;
//   .clearfix {
//     border-bottom: 1px solid #ccc;
//   }
// }

.departments {
  margin: 20px;
  .mycard {
    padding: 40px;
    .box {
      padding: 30px 60px;
      .myborder {
        border-bottom: 1px solid #ccc;
        line-height: 50px;
      }
      .mytree {
        margin-top: 10px;
      }
    }
  }
}
</style>
